<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>?</title>

        <style>

           *{

               margin:0; padding:0; border:0; list-style: none;

           }

           a{

               text-decoration: none; font-size: 30px; color: #fff;

           }

           div{

               width: 580px;

               height: 200px;

               margin: 50px auto;

               position: relative;

           }

           a{

               float: left;

               width: 25px;

               height: 90px;

               line-height: 90px;

               background: #333;

               opacity: 0.7;

               border-radius: 4px;

               text-align: center;

               display: none;

               cursor: pointer;

           }

           .left{

               position: absolute;

               left: -12px;

               top: 60px;

           }

           .right{

               position: absolute;

               right: -12px;

               top: 60px;

           }

           div:hover a{

               display: block;

           }

           ul{

               width: 110px;

               height: 20px;

               background: #333;

               opacity: 0.5;

               border-radius: 8px;

               position: absolute;

               right: 30px;

               bottom: 20px;

               text-align: center;

           }

           li{

               width: 5px;

               height: 5px;

               background: #ccc;

               border-radius: 50%;

               display: inline-block;

           }

           .max{

               width: 12px;

               background: #03BDE4;

               border-radius: 6px;

           }

        </style>

    </head>

    <body>

        <div >

           <img src= "images/11.jpg" alt="">

           <a href="#"class="left"></a>

           <a href="#"class="right"></a>

           <ul>

               <li class="max"></li>

               <li></li>

               <li></li>

               <li></li>

               <li></li>

               <li></li>

           </ul>

        </div>

    </body>

</html>

